<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>light to dark</title>
		<link id="theme" rel="stylesheet" type="text/css" href="white.css" /><!-- 定位 -->
	</head>
	<body>
		<button id="theme-toggle">开关</button><!-- 黑暗模式开关按钮 -->
		<script>
			// 当 DOM 加载完成后触发回调函数
			document.addEventListener('DOMContentLoaded', () => {

				const themeStylesheet = document.getElementById('theme');
				const storedTheme = localStorage.getItem('theme');
				if (storedTheme) {
					themeStylesheet.href = storedTheme;
				}
				const themeToggle = document.getElementById('theme-toggle');
				themeToggle.addEventListener('click', () => {
					// if it's light -> go dark             if=>是否含有white
					if (themeStylesheet.href.includes('white')) {
						themeStylesheet.href = 'dark.css';
						// themeToggle.innerText = '开灯';
					} else {
						// if it's dark -> go light
						themeStylesheet.href = 'white.css';
						// themeToggle.innerText = '关灯';
					}
					// 保存用户选择的主题
					localStorage.setItem('theme', themeStylesheet.href)
				})
			})
		</script>
	</body>
</html>
